<template>
  <!-- 页面容器 -->
  <el-container style="height: 100vh; border: 1px solid #eee">
    <!-- 左侧导航栏 -->
    <el-aside :width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246)">
      <Sidebar />
    </el-aside>

    <!-- 右侧内容 -->
    <el-container>
      <!-- 页面头部 -->
      <el-header style="background-color: #409EFF; padding: 10px; color: white">
        <div style="display: flex; align-items: center">
          <!-- 头像 -->
          <el-avatar
              size="60"
              src="https://tse2-mm.cn.bing.net/th/id/OIP-C.KXyKVyQgsaqsg7dRS3bGmgHaGN?w=212&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7"
              alt="头像"
              style="margin-right: 20px"
          />
          <!-- 用户信息 -->
          <div>
            <h2 style="margin: 0; font-size: 24px">熊老师</h2>
            <p style="margin: 0; font-size: 16px">前端工程师</p>
          </div>
        </div>
      </el-header>

      <!-- 页面主体 -->
      <el-main style="padding: 20px">
        <el-card shadow="always">
          <h2>教师个人信息</h2>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form label-width="120px" style="font-size: 20px">
                <!-- 工号 -->
                <el-form-item label="工号">
                  <el-input v-model="user.id" readonly />
                </el-form-item>

                <!-- 姓名 -->
                <el-form-item label="姓名">
                  <el-input v-model="user.name" readonly />
                </el-form-item>

                <!-- 密码 -->
                <el-form-item label="密码">
                  <el-input v-model="user.password" type="password" readonly />
                </el-form-item>

                <!-- QQ邮箱号码 -->
                <el-form-item label="QQ邮箱">
                  <el-input v-model="user.email" readonly />
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
          <!-- 修改按钮 -->
          <div>
            <!-- 编辑按钮，点击后显示弹窗 -->
            <el-button type="primary" @click="showEditDialog">编辑用户信息</el-button>

            <!-- 弹窗 -->
            <el-dialog
                v-model="dialogVisible"
                title="修改信息"
                width="800px"
                @close="resetForm"
            >
              <!-- 表单 -->
              <el-form
                  :model="update_user"
                  ref="update_userForm"
                  label-width="80px"
                  style="font-size: 20px; text-align: center"
              >
                <!-- 工号 -->
                <el-form-item label="工号" prop="id">
                  <el-input v-model="update_user.id" disabled></el-input>
                </el-form-item>

                <!-- 姓名 -->
                <el-form-item
                    label="姓名"
                    prop="name"
                    :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]"
                >
                  <el-input v-model="update_user.name"></el-input>
                </el-form-item>

                <!-- 密码 -->
                <el-form-item
                    label="密码"
                    prop="password"
                    :rules="[{ required: true, message: '请输入密码', trigger: 'blur' }]"
                >
                  <el-input v-model="update_user.password" type="password"></el-input>
                </el-form-item>

                <!-- QQ 邮箱 -->
                <el-form-item
                    label="QQ邮箱"
                    prop="email"
                    :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }]"
                >
                  <el-input v-model="update_user.email"></el-input>
                </el-form-item>

                <!-- 弹窗底部按钮 -->
                <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="submitForm">提交</el-button>
                </span>
              </el-form>
            </el-dialog>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Teacher_Info from "@/js/Teacher_Info";
import Sidebar from "@/views/SidebarForT.vue";

export default {
  components: {
    Sidebar, // 注册导航栏组件
  },
  mounted() {
    this.show();
  },
  data() {
    return {
      dialogVisible: false, // 控制弹窗显示与隐藏
      user: {

      },
      update_user: {
        id: '',         // 工号
        name: '',       // 姓名
        password: '',   // 密码
        email: '', // QQ邮箱

      }
    };
  },
  methods:Teacher_Info.methods
}
</script>

<style scoped>
/* 自定义样式 */
.dialog-footer {
  text-align: right;
}
</style>